<template>
    <div>
        <div id="buttons">
            <span><el-input v-model="inputMessage" placeholder="请输入台号"></el-input></span>
            <span style="margin-left: 15px"><diySelect :option-data="optionData" :propsValue="selectValue" @choose="choose" ></diySelect></span>
            <span style="margin-left: 15px"><el-button type="primary" @click="selectTable()">查询</el-button></span>
        </div>
        <div>
            <el-table
                    @cell-click="getRowIndex"
                    :header-cell-style="this.$store.state.headerCssObj"
                    :cell-style="this.$store.state.cellCssObj"
                    :data="pageData"
                    border
                    style="width: 100%">
                <el-table-column
                        prop="seatsId"
                        label="餐桌id"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="peopleNum"
                        label="可容纳人数"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="type"
                        label="位置">
                </el-table-column>
                <el-table-column
                        prop="state"
                        label="状态">
                </el-table-column>
                <el-table-column
                        prop="operate"
                        label="操作">
                    <template slot-scope="scope"><el-button  @click="reviseState(scope.row,scope.$index)" size="mini">修改</el-button></template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog
                center
                title="修改餐桌状态"
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose">
            <div>
                <div id="table">
                    <span>餐桌id:</span><span>{{id}}</span>
                </div>
                <div id="state">
                    <span>状态:</span><span><diySelect @choose="choose1" :option-data="location" :propsValue="selectState" style="width: 150px;height: 15px" ></diySelect></span>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="alert()">确 定</el-button>
  </span>
        </el-dialog>
        <div class="pages">
            <paging :obj = 'pagingData'></paging>
        </div>
    </div>
</template>

<script>
    import diySelect from "../../components/publicCom/diySelect";
    import paging from "../../components/publicCom/paging";
    import * as  url from '../../http/api'
    export default {
        name: "tableStatePage",
        components:{
            diySelect,
            paging
        },
        data(){
            return {
                tableData:[],
                optionData:[
                    {value:0,label:'大厅'},
                    {value:1,label:'包间'},
                ],
                location:[
                    {value:0,label:'占用'},
                    {value:1,label:'脏台'},
                    {value:2,label:'可用'},
                ],
                currentData:[],
                currentPage:1,//当前页
                dialogVisible: false,
                inputMessage:'',
                id:'',
                selectValue:'',
                selectState:'',
                fenyeType:0,
                currentIndex:null,
                pageCount:1,
                pageNums:0,//总页数
            }
        },
        methods: {
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            choose(val){
                this.selectValue = val;//获取选项值
            },
            choose1(val){
                this.selectState = val
            },
            selectTable(){
                //1.餐桌id  number
                //2.页容量
                //3.页码
                if (this.inputMessage === ''){
                    this.$message({message:'请输入值'})
                }else {
                    let val = this.selectValue;
                    let label = this.optionData[val].label;
                    let tableNum = Number(this.inputMessage);
                    let obj = {
                        number:tableNum,
                        type:label,
                        pageEntity:{
                            pageCount:this.pageCount,
                            pageSize:1,
                        }
                    };
                    this.$axios({
                        url:url.tableSelect,
                        method:'post',
                        data:obj
                    }).then(resp=>{
                        if (resp.data.Code === 200){
                            this.currentData = resp.data.seatList
                            this.$message.success({message:'查询成功'})
                        }else{
                            this.$message.error({message:'查询失败'})
                        }
                    }).catch(err=>{
                        console.log(err)
                    })
                }


            },
            getRowIndex(row,column,cell,event){
                this.id=row.seatsId
            },
            fenye1(){
                let obj = {
                    pageCount:5,//页容量
                    pageSize:this.currentPage,//当前页
                };
                this.$axios({
                    url:url.tablePaging,
                    method: 'post',
                    data:obj
                }).then(resp=>{
                    console.log(resp.data.seatsList)
                    console.log(resp.data.totalPage)
                    this.currentData = resp.data.seatsList
                    this.pageNums = resp.data.totalPage
                })
            },//普通分页
            reviseState(obj,index){
                this.dialogVisible = true;
                this.seatsId = obj.seatsId;
                this.peopleNum = obj.peopleNum;
                this.type = obj.type;
                this.state = obj.state;
                this.currentIndex = index
            },
            alert(){
                this.dialogVisible = false
                let val = this.selectState;
                let label = this.location[val].label;
                let obj = {
                    state:label,
                    seatsId:this.seatsId,
                    peopleNum:this.peopleNum,
                    type:this.type
                };
                this.$axios({
                    url:url.tableUpdateState,
                    method:'post',
                    data:obj
                }).then(resp=>{
                    console.log(resp)
                    if(resp.data.Code === 200){
                        this.$message.success({message: '修改成功！'})
                        this.currentData.splice(this.currentIndex,1,obj)
                    }else if(resp.Code === 400){
                        this.$message.error('修改失败！!')
                    }
                }).catch(err=>{
                        console.log(err)
                    }) //修改


            },

        },
        mounted(){
          this.fenye1()
        },
        computed:{
            pagingData(){
                var that = this;
                let data = {
                    pageSize:5,//一页展示几条数据
                    pagerCount:5,//超过多少页打点省略
                    pageCount: this.pageNums,//一共有几页
                    currentChange(num){
                        // console.log(num)
                        that.currentPage = num;
                        if (that.fenyeType){
                            that.fenye()
                        }else {
                            that.fenye1()
                        }                        //改变当前页

                    },
                };
                return data
            },
            pageData(){
                return this.currentData
            }

        },
    }
</script>

<style scoped lang="less">
    .el-input{
        width: 150px;
        height: 30px;
    }
    .el-icon-arrow-down {
        font-size: 12px;
    }
    .el-button{
        background-color: #409EFF;
        color: white;
    }
    #buttons{
        padding-bottom: 30px;
        padding-top: 10px;
    }
    #table{
        span:nth-child(1){
            width: 96px;
            height: 30px;
            display: inline-block;
        }
        span:nth-child(2){
            width: 150px;
            height: 30px;
            display: inline-block;
        }

    }
    #state{
        span:nth-child(1){
            width: 96px;
            height: 30px;
            display: inline-block;
        }
        span:nth-child(2){
            width: 150px;
            height: 30px;
            display: inline-block;
        }

    }
    .pages{
        padding:20px 0;
        text-align: center;
    }
</style>